<template>
  <div class="real-header">
    <div class="wrapper">
      <header-usual></header-usual>
      <header-search></header-search>
      <header-login v-show="this.$store.state.username == ''"></header-login>
      <header-info v-show="this.$store.state.username !== ''"></header-info>
    </div>
  </div>
</template>

<script>
import HeaderUsual from './component/HeaderUsual.vue';
import HeaderSearch from './component/HeaderSearch.vue';
import HeaderLogin from './component/HeaderLogin.vue';
import HeaderInfo from './component/HeaderInfo.vue';
export default {
  name: 'CommonHeader',
  inject: ['reload'],
  components: {
    HeaderUsual,
    HeaderSearch,
    HeaderLogin,
    HeaderInfo
  },
  watch: {
    $route (to,from,next) {
      if (to.name == 'Home' && from.name == "Login") {
        this.reload();
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/variables.styl'
  .real-header
    position: fixed
    top: 0
    height: .9rem
    width: 100%
    background: #dddcdd
    box-shadow:0 .04rem .04rem 0 #bbb
    z-index: $header-index
    .wrapper
      width: 19.2rem
      margin: 0 auto
      position: relative
      height: .9rem
      line-height: .9rem
</style>